<template>
  <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleform" label-width="auto" class="demo-ruleForm" :size="formSize" status-icon>
    <el-form-item label="企业全称" prop="enterpriseName">
      <el-input v-model="ruleform.enterpriseName" />
    </el-form-item>
    <el-form-item label="企业简称" prop="enterpriseAbbreviation">
      <el-input v-model="ruleform.enterpriseAbbreviation" />
    </el-form-item>
    <el-form-item label="企业LOGO" prop="corporateLogo">
      <el-upload class="avatar-uploader"
      action={{ actionload }}
      :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
    <img v-if="ruleform.corporateLogo" :src="ruleform.corporateLogo" class="avatar" />
    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
  </el-upload>
    </el-form-item>
    <el-form-item label="详细地址" prop="detailedAddress">
      <BMap :center="point || '北京市'">
        <!-- <BZoom /> -->
        <BAutoComplete style="width: 100%" @confirm="handleConfirm" />
        <BMarker v-if="point" :position="point"></BMarker>
      </BMap>
    </el-form-item>
    <el-form-item label="企业电话" prop="enterprisePhone">
      <el-input v-model="ruleform.enterprisePhone" />
    </el-form-item>
    <el-form-item label="统一社会信用代码" prop="socialCredit">
      <el-input v-model="ruleform.socialCredit" />
    </el-form-item>
    <el-form-item label="描述" prop="describe">
      <el-input v-model="ruleform.describe" />
    </el-form-item>
    <el-form-item label="停用企业" prop="defunctEnterprise">
      <el-switch v-model="ruleform.delivery" />
    </el-form-item>
    <el-form-item label="负责人" prop="principal">
      <el-input v-model="ruleform.principal" />
    </el-form-item>
    <el-form-item label="财务负责人" prop="financePrincipal">
      <el-input v-model="ruleform.financePrincipal" />
    </el-form-item>
    <el-form-item label="分管负责人" prop="responsiblePerson">
      <el-input v-model="ruleform.responsiblePerson" />
    </el-form-item>
    <el-form-item label="可查看人员" prop="superintendent">
      <el-input v-model="ruleform.superintendent" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" style="margin-left: 300px;" @click="submitForm(ruleFormRef)">保存</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import axios from "axios";
import { ref, reactive, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { Plus } from '@element-plus/icons-vue'
import { useRoute, useRouter } from "vue-router";
import type { ComponentSize, FormInstance, FormRules } from "element-plus";
import { BMap, BAutoComplete, BMarker, type Point, useAddressGeocoder } from 'vue3-baidu-map-gl'

const { get, point } = useAddressGeocoder<Point>()

const apiUrl = import.meta.env.VITE_APP_API_URL;
const apiBedinUrl = import.meta.env.VITE_APPRead_API_URL;

const actionload=apiUrl+ '/api/Enterprise/UploadFilest';

const formSize = ref<ComponentSize>("default");
const ruleFormRef = ref<FormInstance>()
//响应式数据  添加
const ruleform = reactive({
  enterpriseId: 0,
  enterpriseName: "",
  enterpriseAbbreviation: "",
  corporateLogo: "",
  detailedAddress: "",
  enterprisePhone: "",
  socialCredit: "",
  describe: "",
  defunctEnterprise: 1,
  principal: "",
  financePrincipal: "",
  responsiblePerson: "",
  superintendent: "",

  delivery: false
});

//百度地图获取
const handleConfirm=(e:any)=> {
  console.log(e)
  const value = e.item.value
  ruleform.detailedAddress=value.province + value.city + value.district + value.street + value.business;
}

const route = useRoute();
const router = useRouter();

//上传图片
const handleAvatarSuccess = (val: any) => {
  ruleform.corporateLogo = apiUrl + val;
};
//图片格式与大小
const beforeAvatarUpload = (rawFile: any) => {
  //JPG,PNG,GIF
  if (
    rawFile.type !== "image/jpeg" &&
    rawFile.type !== "image/png" &&
    rawFile.type !== "image/gif"
  ) {
    ElMessage.error("图片格式只能是jpg,png,gif，请重新选择!");
    return false;
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error("图片大小不能大于 2MB!");
    return false;
  }
  return true;
};

//保存
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      ruleform.delivery==true?ruleform.defunctEnterprise=2:ruleform.defunctEnterprise=1
      axios
        .post(apiUrl+"/api/Enterprise/AddEnterprise", ruleform)
        .then((res) => {
          if (res.data.code == 0) {
            ElMessage.success("添加成功");
            router.push("/EnterpriseShow");
          } else {
            ElMessage.error("添加失败");
          }
        });
    }
  });
};
</script>


<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>

<style>
.bm-view{
  width: 100%;
  height: 550px;
}
</style>
